<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.development.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.development.js"></script>
		<!-- 引入babel，用于解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="test"></div>

		<script type="text/babel">
			/* 
				关于类式组件中的构造器：
						1.一般在开发中我们从来不写构造器，因为原本需要在构造器中完成的如下两个任务：
									(1).通过给 this.state 赋值对象来初始化内部 state
									(2).解决事件处理函数中this的问题
							均可以通过如下两个方式搞定：
									(1).state = {}完成初始化state
									(2).changeWeather = ()=>{} 解决this指向问题

						2.如果写了构造器，那么构造器中必调用super，调用super时传不传入props呢？
									(1).如果传递，在super语句之后，可以通过this.props正常获取props
									(2).如果不传递，在构造器中this.props是undefined。（此场景几乎开发中不出现）
			*/
			//定义组件
			class Weather extends React.Component{
				constructor(props){
					// console.log('constructor',props)
					super(props)
					console.log('%%%',this.props)
					this.state = {isHot:true}
				}

				render(){
					return (
						<div>
							<h2>今天天气很{this.state.isHot ? '炎热' : '凉爽'}</h2>
							<h4>我收到了一个人的信息：{this.props.name}--{this.props.age}</h4>
							<button onClick={this.changeWeather}>切换天气</button>
						</div>
					)
				}

				changeWeather = ()=>{
					//获取原来的isHot值
					const {isHot} = this.state
					//更新状态
					this.setState({isHot:!isHot})
				}
			}

			//渲染组件
			ReactDOM.render(<Weather name="老刘" age={18}/>,document.getElementById('test'))
		</script>
	</body>
</html>